<script lang='ts' setup>
import { themeColor } from '@/hooks/useEchartTheme'

type ThemeName = keyof (typeof themeColor)

const theme = defineModel<ThemeName>({ default: 'light' })
</script>

<template>
  <div class="h-[32px] w-full flex cursor-pointer items-center">
    <el-dropdown trigger="click" class="w-full">
      <el-space
        class="h-[32px] w-full border border-[var(--el-border-color)] rounded-[var(--el-border-radius-base)] border-solid px-2"
      >
        <span class="mr-2">{{ themeColor[theme!].name }}</span>
        <span
          v-for="color in themeColor[theme!].colors" :key="color" :style="{ backgroundColor: color }"
          :class="$style['color-item']"
        />
      </el-space>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in themeColor" :key="item.name">
            <el-space>
              <div class="w-[40px]">
                {{ item.name }}
              </div>
              <span
                v-for="color in item.colors" :key="color" :style="{ backgroundColor: color }"
                :class="$style['color-item']"
              />
            </el-space>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style lang='scss' module>
.color-item {
  width: 16px;
  height: 16px;
  // margin: 0 10px;
  border-radius: 50%;
  margin-right: 6px;
}
</style>
